<template>
  <div class="warehouse_list">
    <!--仓库列表操作 -->
    <el-row class="warehouse_operation">
      <el-col :span="20">
        <div class="title">仓库列表</div>
      </el-col>
      <el-col :span="4">
        <el-tooltip class="item" effect="light" content="添加" placement="top">
          <el-button type="primary" class="iconfont icon-tianjia" @click="showAddWarehouse = true" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="修改" placement="top">
          <el-button type="warning" class="iconfont icon-xiugai" @click="editWarehousePopups" circle></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="light" content="删除" placement="top">
          <el-button type="danger" class="iconfont icon-changyonggoupiaorenshanchu" @click="deleteWarehousePopups" circle></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
    <!-- 仓库列表列表 -->
    <el-table
        :data="warehouseList"
        border
        @selection-change="selectTarget"
    >
      <el-table-column
          type="selection"
          width="60">
      </el-table-column>
      <el-table-column
        prop="name"
        label="仓库名称"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="410px">
      </el-table-column>
      <el-table-column
        prop="contactNumber"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
            <el-tag :type="scope.row.state == '正常' ? 'success' : 'danger'">{{ scope.row.state }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 仓库分页 -->
    <el-pagination
        @size-change="handleWarehouseTableSizeChange"
        @current-change="handleWarehouseTableCurrentChange"
        :current-page="warehousePageList.currentPage"
        :page-sizes="[5, 10, 15, 20, 30]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="warehouseTotal">
    </el-pagination>
    <!-- 添加仓库弹出层 -->
    <el-dialog  title="添加仓库" :visible.sync="showAddWarehouse" width="40%" @close="handleCloseAddWarehouse" append-to-body>
        <el-form :model="addWarehouseForm" ref="addWarehouseFormRef" :rules="addWarehouseFormRules">
            <!-- 仓库姓名 -->
            <el-form-item prop="name">
                <el-input placeholder="请输入仓库姓名" v-model="addWarehouseForm.name" clearable>
                  <template slot="prepend">仓库姓名</template>
                </el-input>
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item prop="contactNumber">
              <el-input placeholder="请输入联系电话" v-model="addWarehouseForm.contactNumber" clearable>
                    <template slot="prepend">联系电话</template>
                </el-input>
            </el-form-item>
            <!-- 地址 -->
            <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
              :props="{ expandTrigger: 'hover' }" @change="handleAddWarehouseAddressChange">
            </el-cascader>
        </el-form>
        <span slot="footer">
            <el-button @click="showAddWarehouse = false">取 消</el-button>
            <el-button type="primary" @click="addWarehouse">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 修改仓库弹出层 -->
    <el-dialog  title="修改仓库" :visible.sync="showEditWarehouse" width="40%" append-to-body>
        <el-form :model="editWarehouseForm" ref="editWarehouseForm" :rules="editWarehouseFormRules">
            <!-- 仓库名称 -->
            <el-form-item prop="name">
                <el-input placeholder="请输入仓库名称" v-model="editWarehouseForm.name" clearable>
                  <template slot="prepend">仓库名称</template>
                </el-input>
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item prop="contactNumber">
              <el-input placeholder="请输入仓库联系电话" v-model="editWarehouseForm.contactNumber" clearable>
                    <template slot="prepend">仓库联系电话</template>
                </el-input>
            </el-form-item>
            <!-- 地址 -->
            <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
              :props="{ expandTrigger: 'hover' }" @change="handleEditWarehouseAddressChange">
            </el-cascader>
        </el-form>
        <span slot="footer">
            <el-button @click="showEditWarehouse = false">取 消</el-button>
            <el-button type="primary" @click="editWarehouse">确 认</el-button>
        </span>
    </el-dialog>
    <!-- 删除仓库弹出层 -->
    <el-dialog title="删除仓库" :visible.sync="showDeleteWarehouse" width="30%" append-to-body>
      <el-row>
          <el-col :span="3">
            <svg t="1652248818186" class="icon" viewBox="0 0 1040 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4020" width="32" height="32"><path d="M133.534106 982.154208c-78.393906 0-113.368619-57.111137-77.716004-126.943393L444.214002 94.571489c35.652615-69.819703 95.023424-70.359514 131.931412-1.200974L983.376105 856.40342c36.916357 69.166909 2.975236 125.759158-75.410301 125.759157H133.534106v-0.008369z" fill="#FFB624" p-id="4021"></path><path d="M203.655099 894.734165c-63.208068 0-91.412132-50.687808-62.668258-112.661425l313.17809-675.060497c28.743874-61.965248 76.619645-62.44229 106.380372-1.062883l328.372297 677.182078c29.764912 61.387776 2.397764 111.611096-60.801936 111.611096H203.655099v-0.008369z" fill="#FFD91C" p-id="4022"></path><path d="M468.442715 376.22296v223.305883c0 28.88615 23.416905 52.30724 52.30724 52.307239 28.88615 0 52.30724-23.42109 52.30724-52.307239V376.22296c0-28.890335-23.42109-52.30724-52.30724-52.30724-28.890335 0-52.30724 23.416905-52.30724 52.30724zM468.442715 765.819834v33.254851c0 28.881965 23.416905 52.30724 52.30724 52.30724 28.88615 0 52.30724-23.425274 52.30724-52.30724v-33.254851c0-28.88615-23.42109-52.30724-52.30724-52.307239-28.890335 0-52.30724 23.42109-52.30724 52.307239z" fill="#6E6E96" p-id="4023"></path><path d="M133.534106 961.231312c-30.354937 0-53.006064-9.687301-63.781356-27.28764s-9.105644-42.180558 4.699283-69.217124l388.3959-760.635141c13.327885-26.103405 30.47629-41.159521 47.051408-41.310166 16.570934-0.150645 33.991337 14.591628 47.787894 40.443958l407.230692 763.032905c14.256861 26.714353 16.407735 50.934698 6.046717 68.20864-10.361018 17.265574-32.727594 26.768753-62.99884 26.768753H133.534106a20.922896 20.922896 0 1 1 0-0.004185z m0 41.849977h774.440067c45.549144 0 80.661948-16.729948 98.881606-47.101623 18.219658-30.37586 16.441212-69.242232-5.013126-109.435115L594.603593 83.520016c-21.701228-40.661556-51.913889-62.89004-85.085048-62.588751-33.171159 0.30129-62.977917 23.07377-83.942659 64.124491L37.179986 845.695081c-20.676006 40.502542-21.784919 79.59488-3.113327 110.100463 18.667408 30.493028 53.98944 47.28156 99.471632 47.28156a20.922896 20.922896 0 0 1-0.004185 0.004185z" fill="#6E6E96" p-id="4024"></path></svg>
          </el-col>
          <el-col :span="21">
            <div class="deleteWarehouseMsg">确定要删除这{{selectedWarehouseNumber}}条记录吗？</div>
          </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteWarehouse = false">再想想</el-button>
        <el-button type="primary" @click="deleteWarehouse">想好了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'warehouseList',
    data() {

      /* 手机号表单验证 */
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('联系电话不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };

      return {
        /* 仓库列表 */
        warehouseList: [],
        /* 仓库表分页信息 */
        warehousePageList:{
            pageNo: 1,
            pageSize: 5,
            currentPage: 1,
            name: '',
            state: '',
            address: '',
        },
        /* 仓库表总条数 */
        warehouseTotal: 0,

        /* 选中仓库个数 */
        selectedWarehouseNumber: 0,
        /* 选中仓库数组 */
        selectedWarehouse: [],

        /* 选中的地址 */
        addressSelected: '',
        /* 地址下拉框数据 */
        addressDownBox: [],

        /* 添加仓库表单 */
        addWarehouseForm: {
          name: '',
          contactNumber: '',
          address: '',
          currentUserId: ''
        },
        /* 添加仓库表单验证 */
        addWarehouseFormRules: {
          name: [
            { required: true, message: '请输入仓库名称', trigger: 'blur' },
          ],
          contactNumber: [
            {validator: checkPhone, trigger: 'blur'}
          ],
        },
        /* 控制添加仓库弹出层 */
        showAddWarehouse: false,

        /* 修改仓库表单 */
        editWarehouseForm: {
          name: '',
          contactNumber: '',
          address: '',
          currentUserId: ''
        },
        /* 修改仓库表单验证 */
        editWarehouseFormRules: {
          name: [
            { required: true, message: '请输入仓库名称', trigger: 'blur' },
          ],
          contactNumber: [
            {validator: checkPhone, trigger: 'blur'}
          ],
        },
        /* 控制修改仓库弹出层 */
        showEditWarehouse: false,

        /* 删除仓库id组 */
        deleteWarehouseIds: [],
        /* 控制删除仓库弹出层 */
        showDeleteWarehouse: false,
      }
    },
    methods: {
      /* 复选框选择目标事件回调 */
      selectTarget(selection) {
          this.selectedWarehouseNumber =  selection.length
          this.selectedWarehouse = selection
      },

      /* 分页获得仓库列表 */
      async getWarehousePageList(warehouse) {

        if(warehouse != undefined) {
          this.warehousePageList.name = warehouse.name
          this.warehousePageList.state = warehouse.state

          if(warehouse.address == 'undefined · undefined') {
            this.warehousePageList.address = ''
          } else {
            this.warehousePageList.address= warehouse.address
          }
        }


        const { data: res } = await this.$http.post('workbench/warehouse/warehousePageList.do',this.warehousePageList)
        if (res.code == '1') {
          this.warehouseList = res.others
        } else {
          this.$message.error('获取仓库表失败!')
        }
      },
      /* 获得仓库列表总条数 */
      async getWarehouseTotal() {
          const { data: res } = await this.$http.post('workbench/warehouse/getWarehouseTotal.do',this.warehousePageList)
          if (res.code == '1') {
            this.warehouseTotal = res.number
          } else {
              this.$message.error('获取目标表总条数失败!')
          }
      },
      /* 处理分页每页显示几行 */
      handleWarehouseTableSizeChange(val) {
          this.warehousePageList.pageSize = val
          this.getWarehouseTotal()
          this.getWarehousePageList()
      },
      /* 处理分页切换页数 */
      handleWarehouseTableCurrentChange(val) {
          this.warehousePageList.pageNo = val
          this.getWarehouseTotal()
          this.getWarehousePageList()
      },

      /* 添加仓库修改地址事件回调 */
      handleAddWarehouseAddressChange(value) {
        const address = value[0] + " · " + value[1]
        this.addWarehouseForm.address = address
      },
      /* 添加仓库弹出层关闭回调 */
      handleCloseAddWarehouse() {
        this.$refs['addWarehouseFormRef'].resetFields();
        this.addressSelected = ''
      },
      /* 添加仓库 */
      async addWarehouse() {
        this.$refs.addWarehouseFormRef.validate(async valid => {
          if (!valid) return
          const { data: res } = await this.$http.post('workbench/warehouse/addWarehouse.do',this.addWarehouseForm)
          if (res.code == '1') {
            this.showAddWarehouse = false
            this.$refs['addWarehouseFormRef'].resetFields();
            this.getWarehousePageList()
            this.getWarehouseTotal()
            this.$message.success('添加仓库成功!')
          } else {
            this.$message.error('添加仓库失败!')
          }
        })
      },

      /* 修改仓库修改地址事件回调 */
      handleEditWarehouseAddressChange(value) {
        const address = value[0] + " · " + value[1]
        this.editWarehouseForm.address = address
      },
      /* 修改仓库弹出层 */
      editWarehousePopups() {
        if(this.selectedWarehouseNumber > 1) {
            this.$message.error('只能选择一条记录进行修改!')
            return
        }
        if(this.selectedWarehouseNumber < 1) {
            this.$message.error('请选择需要修改的记录!')
            return
        }
        this.editWarehouseForm.name = this.selectedWarehouse[0].name
        this.editWarehouseForm.id = this.selectedWarehouse[0].id
        this.editWarehouseForm.contactNumber = this.selectedWarehouse[0].contactNumber
        this.editWarehouseForm.address = this.selectedWarehouse[0].address

        const index = this.selectedWarehouse[0].address.lastIndexOf(" ")
        const address = this.selectedWarehouse[0].address.substring(index+1,this.selectedWarehouse[0].address.length)
        this.addressSelected = address

        this.showEditWarehouse = true
      },
      /* 修改仓库 */
      async editWarehouse() {
        const { data: res } = await this.$http.post('workbench/warehouse/editWarehouse.do',this.editWarehouseForm)
          if (res.code == '1') {
            this.getWarehousePageList()
            this.getWarehouseTotal()
            this.showEditWarehouse = false
            this.$message.success('修改仓库资料成功!')
          } else {
              this.$message.error('修改用户资料失败!')
          }
      },

      /* 删除仓库弹出层 */
      deleteWarehousePopups() {
        if(this.selectedWarehouseNumber < 1) {
            this.$message.error('请选择需要删除的记录!')
            return
        }

        this.showDeleteWarehouse = true
        for (const Warehouse of this.selectedWarehouse) {
            this.deleteWarehouseIds.push(Warehouse.id)
        }
      },
      /* 删除仓库 */
      async deleteWarehouse() {
        const { data: res } = await this.$http.post('workbench/warehouse/deleteWarehouse.do',this.deleteWarehouseIds)
        if (res.code == '1') {
          this.showDeleteWarehouse = false
          this.getWarehousePageList()
          this.getWarehouseTotal()
          this.$message.success('删除仓库成功!')
        } else {
          this.$message.error('删除仓库失败!')
        }
      },

      /* 获得地址下拉框数据 */
      async getAddressData() {
          const { data: res } = await this.$http.get('settings/provinceCity/getAddressData.do')
          if (res.code == '1') {
            this.addressDownBox = res.others
          } else {
              console.log('获取地址下拉框数据失败!')
          }
      },

      /* 初始化当前登录用户 */
      getCurrentUser() {
        let user = JSON.parse(window.localStorage.getItem('user'))
        this.addWarehouseForm.currentUserId = user.id
        this.editWarehouseForm.currentUserId = user.id
      },
    },
    created() {
      this.getWarehousePageList()
      this.getWarehouseTotal()
      this.getCurrentUser()
      this.getAddressData()
    },
    mounted() {
      this.$bus.$on('getWarehousePageList',this.getWarehousePageList)
      this.$bus.$on('getWarehouseTotal',this.getWarehouseTotal)
    },
    beforeDestroy() {
      this.$bus.$off('getWarehousePageList')
      this.$bus.$off('getWarehouseTotal')
    }
  }
</script>

<style scoped>
/* 仓库列表操作 */
.warehouse_operation {
  background-color: #fff;
  margin: 0px 0px;
  height: 70px;
}
.warehouse_operation .title {
  line-height: 70px;
  margin-left: 15px;
  font-weight: bold;
}
.warehouse_operation .el-button {
  margin-top: 15px;
}
/* 仓库列表 */
.warehouse_list {
  margin: 20px 20px;
  box-shadow: 0 0 10px rgb(220, 223, 220);
}
/* 仓库分页 */
.el-pagination {
  text-align: center;
  padding: 15px 0px;
  background-color: #fff;
}
.el-cascader {
  margin-bottom: 20px;
}
/* 删除目标弹出层样式 */
.deleteWarehouseMsg {
    margin-left: 10px;
    line-height: 35px;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
